<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/css/el.css">
    <script src="/js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="/js/el.js"></script>
    <script src="/js/axios.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            text-align: center;
        }

        .addDeclareBody {
            width: 30%;
            margin: 50px;
            text-align: left;
            display: inline-block;
        }

        .projectName {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .projectInput {
            margin-bottom: 10px;
        }

        .selectProject{
            width: 100vw;
            height: 100vh;
            background-color: #FFFFFF;
            position: absolute;
            z-index: 10;
            padding: 50px;
            box-sizing: border-box;
        }

        .table {
            width: 95%;
            display: inline-block;
        }

        .table .cell {
            text-align: center;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .table .el-table .el-table__cell {
            height: 36px !important;
        }

        .tableBody {
            height: 600px;
            overflow-y: hidden;
        }

        .queryBody {
            width: 95%;
            display: inline-block;
            margin-bottom: 20px;
            text-align: left;
        }

        .queryBody .el-input {
            width: 10%;
        }

        .queryBody .el-select .el-input {
            width: 100% !important;
        }
    </style>
</head>
<body>

<div id="app">

    <div class="selectProject" v-if="selectProject">
        <div class="queryBody">
            <el-page-header @back="selectProject = false" content="申报项目选择" style="margin-bottom: 10px" />
        </div>
        <div class="queryBody">
            <el-input placeholder="请输入项目编号" v-model="project.pId"></el-input>
            <el-input placeholder="请输入项目名称" v-model="project.pName"></el-input>
            <el-button type="primary" icon="el-icon-search" @click="queryProject()">查询</el-button>
        </div>
        <div class="table">
            <div class="tableBody">
                <el-table ref="multipleTable" :data="projects" border style="width: 100%;">
                    <el-table-column prop="pid" label="项目编号">
                        <template slot-scope="scope">
                            <div style="text-align: left">{{scope.row.pid}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="pname" label="项目名称">
                        <template slot-scope="scope">
                            <div style="text-align: left">{{scope.row.pname}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="level" label="级次">
                    </el-table-column>
                    <el-table-column prop="details" label="明细">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.details===1" disabled></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="state" label="启用">
                        <template slot-scope="scope">
                            <el-checkbox v-model="scope.row.state===1" disabled></el-checkbox>
                        </template>
                    </el-table-column>
                    <el-table-column prop="balanceDirection" label="余额方向">
                        <template slot-scope="scope">
                            <div v-if="scope.row.balanceDirection==='0'">支出</div>
                            <div v-else>收入</div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="uname" label="项目负责人">
                    </el-table-column>
                    <el-table-column prop="bname" label="管理部门">
                    </el-table-column>
                    <el-table-column label="操作" width="270px">
                        <template slot-scope="scope">
                            <el-button size="mini" @click="selectProjectClick(scope.row)">选择项目</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="text-align: center;">
                <el-pagination @current-change="currentChange" @next-click="nextClick()" @prev-click="prevClick()" background layout="prev, pager, next" :total="total">
                </el-pagination>
            </div>
        </div>
    </div>

    <div class="addDeclareBody">
        <el-row :gutter="20">
            <el-col :span="12">
                <div class="projectName">
                    申报事项
                </div>
                <div class="projectInput">
                    <el-input v-model="declare.declareName" placeholder="请输入报销事项"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    <a href="javaScript:void(0)" @click="selectProject = true">选择项目</a>
                </div>
                <div class="projectInput">
                    <el-input placeholder="请选择项目" v-model="declare.pId" :disabled="true"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    报销金额
                </div>
                <div class="projectInput">
                    <el-input v-model="declare.money" placeholder="请输入报销的金额"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    会计年度
                </div>
                <div class="projectInput">
                    <el-input v-model="declare.yearName" :disabled="true" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    会计区间
                </div>
                <div class="projectInput">
                    <el-input v-model="declare.intervalName" :disabled="true" placeholder="请输入内容"></el-input>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="projectName">
                    填报人手机号
                </div>
                <div class="projectInput">
                    <el-input v-model="declare.phone" placeholder="请输入填报人手机号"></el-input>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="projectName">
                    申报说明
                </div>
                <div class="projectInput">
                    <el-input
                            type="textarea"
                            :rows="2"
                            placeholder="请输入内容"
                            v-model="declare.describe">
                    </el-input>
                </div>
            </el-col>
            <el-col :span="24">
                <div class="projectInput" style="text-align: right;">
                    <el-button type="warning" @click="clear()">清除数据</el-button>
                    <el-button type="primary" @click="addDeclare">添加申报</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        created() {
            this.getYearAndMonth();
            this.getProjects();
        },
        data() {
            return {
                selectProject:false,
                declare: {
                    declareName: '',
                    pId: '',
                    money: '',
                    yearName: '',
                    intervalName: '',
                    phone:'18924016648',
                    describe:''
                },
                project:{
                    pName:'',
                    pId:''
                },
                currentPage:1,
                projects: [],
                lock: false,
                total:0,
            }
        },
        methods: {
            addDeclare(){
                //验证参数
                if(this.declare.pId === undefined || this.declare.pId.trim() === ""){
                    this.$message({
                        message: '请选择需要申报的项目',
                        type: 'warning'
                    });
                    return;
                }else if(this.declare.declareName === undefined || this.declare.declareName.trim() === ""){
                    this.$message({
                        message: '请输入申报事项',
                        type: 'warning'
                    });
                    return;
                }else if(this.declare.phone === undefined || this.declare.phone.trim() === ""){
                    this.$message({
                        message: '请输入填报人手机号',
                        type: 'warning'
                    });
                    return;
                }else{
                    let regex = /^\d+(\.\d{1,2})?$/;
                    if(!regex.test(this.declare.money)){
                        this.$message({
                            message: '请输入正确的金额信息',
                            type: 'warning'
                        });
                        return;
                    }
                    regex = /^1[3-9]\d{9}$/;
                    if(!regex.test(this.declare.phone)){
                        this.$message({
                            message: '请输入正确的手机号码',
                            type: 'warning'
                        });
                        return;
                    }

                    if(!this.lock){
                        this.lock = true;
                        const formData = new FormData();
                        formData.append("phone", this.declare.phone);
                        formData.append("money", this.declare.money);
                        formData.append("declareName", this.declare.declareName);
                        formData.append("pId", this.declare.pId.split("/")[0]);
                        formData.append("supplement", this.declare.describe);

                        axios.post("/declare/addDeclare",formData)
                            .then((response) => {
                                response = response.data;
                                if (response.code === 403) {
                                    location.href = "/page/logonPage"
                                } else if (response.code !== 200) {
                                    this.$message.error(response.message);
                                } else {
                                    this.clear();
                                    this.$message({
                                        message: '添加申报成功',
                                        type: 'success'
                                    });
                                }
                            }).finally(() => {
                            this.lock = false;
                        })
                    }
                }
            },
            clear(){
                this.declare = {
                    declareName: '',
                        pId: '',
                        money: '',
                        yearName: '',
                        intervalName: '',
                        phone:'',
                        describe:''
                }
                this.getYearAndMonth();
            },
            getYearAndMonth() {
                let currentDate = new Date();
                this.declare.yearName = currentDate.getFullYear() + "年";
                this.declare.intervalName = (currentDate.getMonth() + 1) + "月";
            },
            getProjects() {
                if (!this.lock) {
                    this.lock = true;

                    const formData = new FormData();
                    formData.append("pName", this.project.pName);
                    formData.append("pId", this.project.pId);
                    formData.append("current", this.currentPage);
                    axios.post("/project/authorizeProject",formData)
                        .then((response) => {
                            response = response.data;
                            if (response.code === 403) {
                                location.href = "/page/logonPage"
                            } else if (response.code !== 200) {
                                this.$message.error(response.message);
                            } else {
                                this.projects = response.data.records;
                                this.total = response.data.total;
                            }
                        }).finally(() => {
                        this.lock = false;
                    })
                }
            },
            selectProjectClick(row){
                this.selectProject = false;
                this.declare.pId = row.pid+"/"+row.pname;
            },
            queryProject(){
                this.currentPage = 1;
                this.getProjects();
            },
            currentChange(e){
                this.currentPage = e;
                this.getProjects();
            },
            prevClick(){
                if(this.currentPage-1 === 0){
                    return;
                }
                this.currentPage -= 1;
                this.getProjects();
            },
            nextClick(){
                this.currentPage += 1;
                this.getProjects();
            }
        }
    })
</script>
</body>
</html>